<!-- 动态列设置页面 -->
<template>
  <div class="box-card">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>动态表格列名</span>
          </div>
          <el-row>
            <el-col v-for="(item,index) in dynTitle" :key="index">
              <el-button @click="handleUpdate(item)" type="text">{{item.title}}</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix">
            <span>列名操作</span>
          </div>
          <el-form ref="titleForm" :model="TitleForm" label-position="left" label-width="80px">
            <el-form-item label="列标题">
              <el-input v-model="TitleForm.title"/>
            </el-form-item>
            <el-form-item label="框类型">
              <el-select
                :disabled="InputDisabled"
                v-model="TitleForm.rowType"
                @change="selectChange"
                style="width:100%"
              >
                <el-option
                  v-for="item in selectOptionValue"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资产类型">
              <el-select v-model="TitleForm.roomType" :disabled="InputDisabled" style="width:100%">
                <el-option
                  v-for="item in assetOptionValue"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <div v-if="showProp">
              <el-form-item
                v-for="(domain, index) in TitleForm.domains"
                :label="'下拉框' + index"
                :key="index"
              >
                <el-form-item v-if="showProp">
                  <el-input v-model="TitleForm.domains[index]"></el-input>
                </el-form-item>
                <el-row v-if="showSelect">
                  <el-col :span="21">
                    <el-form-item
                      :prop="'domains.' + index+'.value'"
                      :rules="[{ required: true, message: '参数名不能为空',trigger: 'change'}]"
                    >
                      <el-input v-model="domain.value"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </div>
            <el-form-item v-if="InputLengthVisible" label="长度限制">
              <el-input v-model="TitleForm.text_length"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button v-if="showSelect" @click="addDomain">新增下拉框值</el-button>
              <el-button
                type="primary"
                @click="propStatus==='create'?addTitle():updateOptionsValue()"
              >确定</el-button>
              <el-popover v-if="propStatus==='updateProp'" placement="top" v-model="delVisible">
                <p>确定要删除当前列吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button type="text" @click="delVisible = false">取消</el-button>
                  <el-button type="primary" @click="delColumn">确定</el-button>
                </div>
                <el-button slot="reference" type="danger">删除列</el-button>
              </el-popover>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getList,
  addField,
  delField,
  updateTextLength,
  updateFieldName,
  updateSelect
} from "@/api/table";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      listQuery: {
        limit: 10,
        page: 1
      },
      dynTitle: [],
      TitleForm: {
        title: "",
        columnIndex: 0,
        rowType: "",
        roomType: "",
        text_length: "",
        domains: [{ value: "" }]
      },
      showSelect: false,
      showProp: false,
      delVisible: false,
      propStatus: "create",
      InputLengthVisible: false,
      InputDisabled: false,
      selectOptionValue: [
        { value: "1", label: "输入框" },
        { value: "2", label: "数字框" },
        { value: "3", label: "日期框" },
        { value: "4", label: "下拉框" }
      ],
      assetOptionValue: [
        { value: "1", label: "基本信息" },
        { value: "2", label: "产权信息" },
        { value: "3", label: "财务信息" }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //修改列的数据
    handleUpdate(data) {
      console.log("rowtype", data.rowType);
      this.propStatus = "updateProp";
      console.log("data", data);
      this.TitleForm = data;
      if (data.rowType == 1) {
        this.InputLengthVisible = true;
      } else {
        this.InputLengthVisible = false;
      }
      this.TitleForm.rowType = String(this.TitleForm.rowType); //下拉框正常显示
      this.TitleForm.roomType = String(this.TitleForm.roomType);
      this.InputDisabled = true;
      this.showProp = true;
    },
    //重置表单
    handleReset() {
      this.initData();
    },
    //初始化数据
    initData() {
      this.TitleForm = {
        title: "",
        columnIndex: 0,
        rowType: "",
        roomType: "",
        text_length: "",
        domains: []
      };
    },
    //下拉框值发生改变时
    selectChange(value) {
      console.log(value);
      // this.TitleForm.type = value;
      if (value === "4") {
        this.showSelect = true;
      } else {
        this.showSelect = false;
      }
    },
    //添加下拉框
    addDomain() {
      this.TitleForm.domains.push({
        value: ""
      });
    },
    removeDomain(item) {
      //移除下拉框
      var index = this.TitleForm.domains.indexOf(item);
      if (index !== -1) {
        this.TitleForm.domains.splice(index, 1);
      }
    },
    delColumn() {
      delField(this.TitleForm.field)
        .then(response => {
          this.delVisible = false;
          this.fetchData();
          this.initData();
        })
        .catch(error => {});
    },
    //新增列名
    addTitle() {
      this.$refs["titleForm"].validate(valid => {
        if (valid) {
          if (this.TitleForm.rowType != 4) {
            delete this.TitleForm.domains;
          }
          addField(this.TitleForm)
            .then(response => {
              if (response.code === 100) {
                this.fetchData();
                // this.initData();
              }
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updateOptionsValue() {
      console.log("select", this.TitleForm);
      //修改input框长度
      if (this.TitleForm.text_length > 0) {
        let editParmas = {
          line_uuid: this.TitleForm.field,
          text_length: this.TitleForm.text_length
        };
        updateTextLength(editParmas)
          .then(response => {
            this.fetchData();
            this.initData();
          })
          .catch(error => {
            console.log(error);
          });
        //修改下拉项的值
      } else if (this.TitleForm.rowType === "4") {
        let editParmas = {
          line_uuid: this.TitleForm.field,
          domains: this.TitleForm.domains
        };
        updateSelect(editParmas)
          .then(response => {
            this.fetchData();
            this.initData();
          })
          .catch(error => {
            console.log(error);
          });
      }
      //修改列名
      let editParmas = [this.TitleForm.field, this.TitleForm.title];
      updateFieldName(editParmas)
        .then(response => {
          this.fetchData();
          this.dialogTitleVisible = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    fetchData() {
      getList(this.listQuery).then(res => {
        this.dynTitle = res.body.dynTitle;
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.box-card {
  margin: 50px;
}
</style>